<template>
  <div class="our-courses">
    <div class="header">
      <!-- 自定义左右切换按钮 -->
      <div class="title">{{ displayTitle }}</div>
      <div class="custom-arrows">
        <div class="arrow left our-courses-swiper-click-left">
          <svg-icon name="arrow-left" class="svg-style"></svg-icon>
        </div>
        <div class="arrow right our-courses-swiper-click-right">
          <svg-icon name="arrow-right" class="svg-style"></svg-icon>
        </div>
      </div>
    </div>
    <div class="look-all">
      <span @click="handleAll">{{ t("homeCourses.viewAll") }}</span>
      <svg-icon name="arrow-right" class="svg-style"></svg-icon>
    </div>
    <div class="list-courses">
      <swiper
        :modules="[SwiperNavigation]"
        :slides-per-view="3"
        :space-between="20"
        :slides-per-group="3"
        :loop="true"
        :navigation="{
          prevEl: '.our-courses-swiper-click-left',
          nextEl: '.our-courses-swiper-click-right',
        }"
        ref="carousel"
        @swiper="onSwiper"
      >
        <swiper-slide v-for="(item, index) in courseList" :key="index">
          <div
            class="list-courses-item"
            :data-aos="'fade-left'"
            :data-aos-delay="index * 100"
          >
            <img :src="item.promotionalImages[0]" alt="" />
            <div class="title">
              <span>
                {{ item.courseName }}
              </span>
            </div>
            <div class="description">
              <span>
                {{ item.courseFeatures }}
              </span>
            </div>
            <div class="btns">
              <button @click="goDetail(item)">
                {{ t("homeCourses.learnMore") }}
              </button>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="bg-img">
      <img src="~/assets/web/curses-bg-icon.png" alt="" />
    </div>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation as SwiperNavigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
const { $navigate } = useNuxtApp();
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props = defineProps({
  courseList: {
    type: Array,
    default: [],
  },
  title: {
    type: String,
    default: "",
  },
  listPath: {
    type: String,
    default: "/web/courses",
  },
  detailPath: {
    type: String,
    default: "/web/courses",
  },
});
const courseList = ref([]);
watch(
  () => props.courseList,
  (newVal) => {
    courseList.value = newVal || [];
  },
  { immediate: true, deep: true }
);
const displayTitle = computed(() => props.title || t("homeCourses.title"));
const listPath = computed(() => props.listPath || "/web/courses");
const detailBasePath = computed(() => props.detailPath || "/web/courses");

const carousel = ref(null);

const onSwiper = (swiper) => {
  carousel.value = swiper;
};

const goDetail = (item) => {
  $navigate(`${detailBasePath.value}/${item.id}`);
};

const handleAll = () => {
  $navigate(listPath.value);
};
</script>

<style lang="less" scoped>
.our-courses {
  width: 100%;
  padding: 132px 110px;
  box-sizing: border-box;
  background-color: #1d1b1b;
  position: relative;

  .bg-img {
    width: 48%;
    position: absolute;
    top: 96px;
    right: 273px;
    img {
      width: 100%;
    }
  }

  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-family: PingFang HK, PingFang HK;
      font-weight: 500;
      font-size: 40px;
      color: #ffffff;
      text-align: left;
      position: relative;
      padding-left: 27px;
      line-height: 50px;
      box-sizing: border-box;
    }

    .title::after {
      content: " ";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      height: 50px;
      background: var(--theme-gradient-bg);
    }

    .custom-arrows {
      display: flex;
      justify-content: center;

      .arrow {
        width: 44px;
        height: 44px;
        background: #ffffff;
        border-radius: 0px 0px 0px 0px;
        text-align: center;
        line-height: 44px;
        cursor: pointer;

        .svg-style {
          color: #ec4613;
          font-size: 30px;
        }
      }

      .left {
        margin-right: 12px;
      }
    }
  }

  .look-all {
    margin: 20px 0 50px 0;
    font-family: PingFang HK, PingFang HK;
    font-weight: 400;
    font-size: 22px;
    color: var(--el-color-primary);
    text-align: left;
    span {
      cursor: pointer;
    }
    .svg-style {
      font-size: 26px;
    }
  }

  .list-courses {
    width: 100%;
    display: flex;
    align-items: center;

    :deep(.swiper-wrapper) {
      align-items: stretch;
    }

    :deep(.swiper-slide) {
      height: auto;
      display: flex;
      align-items: stretch;
    }

    .list-courses-item {
      background: #fff;
      padding-bottom: 34px;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      flex-direction: column;

      img {
        width: 100%;
        aspect-ratio: 1/0.75;
        object-fit: cover;
        flex-shrink: 0;
      }

      .title {
        color: #1e2021;
        text-align: left;
        padding: 20px 30px;
        box-sizing: border-box;
        flex-shrink: 0;

        span {
          line-height: 33px;
          font-family: PingFang HK, PingFang HK;
          font-weight: 600;
          font-size: 22px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .description {
        color: #1e2021;
        text-align: left;
        padding: 0 30px;
        box-sizing: border-box;
        margin-bottom: 20px;
        flex-grow: 1;

        span {
          font-family: PingFang HK, PingFang HK;
          font-weight: 400;
          font-size: 14px;
          color: #000000;
          line-height: 20px;
          text-align: left;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .btns {
        width: 100%;
        text-align: center;
        margin-top: auto;
        flex-shrink: 0;

        button {
          padding: 10px 40px;
          box-sizing: border-box;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid #1e2021;
          font-family: PingFang HK, PingFang HK;
          font-weight: 600;
          font-size: 14px;
          color: #1e2021;
          position: relative;
          transition: all 0.3s ease;
          cursor: pointer;

          &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 0;
            height: 2px;
            background: var(--theme-gradient-bg);
            transition: width 0.3s ease;
          }

          &:hover::after {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
